<template>
  <div>
    <!-- <label for="phone-number">Phone Number:</label> -->
    <a-input
        :size="'large'"
        id="phone-number"
        v-model:value="phoneNumber"
        placeholder="Enter phone number"
        @input="handleInput"
        @keypress="validateKeyPress"
    >
      <template #addonBefore>
        <a-select
            ref="select"
            :size="'large'"
            v-model:value="selectedCountry"
            style="width: 130px"
            @change="handleCountryChange"
            show-search
            :filter-option="filterOption"
            placeholder="Search"
        >
          <a-select-option :value="item.uniqueId" v-for="item in countries" :key="item.uniqueId">
            <div class="country-option">
              <img
                  :src="`https://flagcdn.com/20x15/${item.label.toLowerCase()}.png`"
                  :alt="item.displayName"
                  class="country-flag-img"
                  @error="handleImageError"
              />
              <span class="country-iso">{{ item.label }}</span>
              <span class="country-code">{{ item.value }}</span>
            </div>
          </a-select-option>
        </a-select>
      </template>
    </a-input>
    <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
  </div>
</template>

<script setup>
import {ref, computed, watch, onMounted, defineEmits, defineProps} from 'vue';
import {parsePhoneNumberFromString, getCountries, getCountryCallingCode} from 'libphonenumber-js';
import {useI18n} from 'vue-i18n';

const {t} = useI18n();
const emit = defineEmits(['update:phoneData']);
const props = defineProps({
  initialPhoneNumber: {
    type: String,
    default: ''
  },
  initialCountryCode: {
    type: String,
    default: '+1'
  }
});

// 用于显示初始值的标志
const initialValues = ref(false);

// 主要国家映射 - 为常见区号定义主要国家
const primaryCountryMap = {
  '+1': 'US',    // 美国为+1的主要国家
  '+44': 'GB',   // 英国为+44的主要国家
  '+7': 'RU',    // 俄罗斯为+7的主要国家
  '+81': 'JP',   // 日本为+81的主要国家
  '+82': 'KR',   // 韩国为+82的主要国家
  '+49': 'DE',   // 德国为+49的主要国家
  '+33': 'FR',   // 法国为+33的主要国家
  '+39': 'IT',   // 意大利为+39的主要国家
  '+34': 'ES',   // 西班牙为+34的主要国家
  '+91': 'IN',   // 印度为+91的主要国家
  '+61': 'AU',   // 澳大利亚为+61的主要国家
  '+55': 'BR',   // 巴西为+55的主要国家
  '+52': 'MX',   // 墨西哥为+52的主要国家
  '+971': 'AE',  // 阿联酋为+971的主要国家
  '+966': 'SA',  // 沙特阿拉伯为+966的主要国家
  '+65': 'SG',   // 新加坡为+65的主要国家
  '+60': 'MY',   // 马来西亚为+60的主要国家
  '+66': 'TH',   // 泰国为+66的主要国家
  '+84': 'VN',   // 越南为+84的主要国家
};

// 生成唯一ID
const generateUniqueId = (country) => {
  return `${country.label}_${country.value}`;
};

// 图片加载错误处理
const handleImageError = (e) => {
  // 当国旗图片加载失败时，设置为一个透明占位图
  e.target.src = '';
};

// 获取所有国家并创建选项列表
const countries = getCountries().map((iso2) => {
  const code = `+${getCountryCallingCode(iso2)}`;
  const country = {
    label: iso2,
    value: code,
    name: iso2, // 使用ISO代码作为名称
    displayName: new Intl.DisplayNames(['en'], {type: 'region'}).of(iso2),
    isPrimary: primaryCountryMap[code] === iso2
  };
  country.uniqueId = generateUniqueId(country);
  return country;
});

// 按照国家的英文名称排序
countries.sort((a, b) => {
  // 首先按区号排序
  const codeComparison = a.value.localeCompare(b.value, undefined, {numeric: true});

  // 如果区号相同，优先显示主要国家
  if (codeComparison === 0) {
    if (a.isPrimary) return -1;
    if (b.isPrimary) return 1;
    // 然后按国家名称排序
    return a.displayName.localeCompare(b.displayName);
  }

  // 否则按区号排序
  return codeComparison;
});

// 将常用国家移到前面
const commonCountries = [
  countries.find(c => c.label === 'US'), // 美国
  countries.find(c => c.label === 'GB'), // 英国
  countries.find(c => c.label === 'JP'), // 日本
  countries.find(c => c.label === 'KR'), // 韩国
  countries.find(c => c.label === 'IN'), // 印度
  countries.find(c => c.label === 'SG'), // 新加坡
  countries.find(c => c.label === 'MY')  // 马来西亚
].filter(Boolean);

// 创建一个没有重复国家的数组
const finalCountries = [
  ...commonCountries,
  ...countries.filter(country => !commonCountries.some(c => c.uniqueId === country.uniqueId))
];

// 根据区号查找默认国家
const findCountryByCode = (code) => {
  const sameCodeCountries = finalCountries.filter(country => country.value === code);
  if (sameCodeCountries.length === 0) {
    return finalCountries.find(country => country.label === 'US') || finalCountries[0];
  }
  // 优先返回主要国家
  return sameCodeCountries.find(country => country.isPrimary) || sameCodeCountries[0];
};

// 表单数据
const phoneNumber = ref('');
const selectedCountry = ref('');
const countryCode = computed(() => {
  const country = finalCountries.find(c => c.uniqueId === selectedCountry.value);
  return country ? country.value : '+1';
});

// 当前选择的国家对象
const currentCountry = computed(() => {
  return finalCountries.find(c => c.uniqueId === selectedCountry.value) || null;
});

// 错误消息
const errorMessage = ref('');
const isValid = ref(false);

// 完整电话号码
const fullPhoneNumber = computed(() => {
  return `${countryCode.value}${phoneNumber.value}`;
});

// 国家手机号位数配置
const phoneNumberLengths = {
  // 北美地区 (美国、加拿大等)
  '+1': {min: 10, max: 10},
  // 中国
  '+86': {min: 11, max: 11},
  // 香港
  '+852': {min: 8, max: 8},
  // 澳门
  '+853': {min: 8, max: 8},
  // 台湾
  '+886': {min: 9, max: 9},
  // 日本
  '+81': {min: 10, max: 11},
  // 韩国
  '+82': {min: 9, max: 10},
  // 英国
  '+44': {min: 10, max: 10},
  // 德国
  '+49': {min: 10, max: 11},
  // 法国
  '+33': {min: 9, max: 9},
  // 意大利
  '+39': {min: 9, max: 10},
  // 西班牙
  '+34': {min: 9, max: 9},
  // 俄罗斯
  '+7': {min: 10, max: 10},
  // 印度
  '+91': {min: 10, max: 10},
  // 澳大利亚
  '+61': {min: 9, max: 9},
  // 巴西
  '+55': {min: 10, max: 11},
  // 墨西哥
  '+52': {min: 10, max: 10},
  // 新加坡
  '+65': {min: 8, max: 8},
  // 马来西亚
  '+60': {min: 9, max: 10},
  // 泰国
  '+66': {min: 9, max: 9},
  // 越南
  '+84': {min: 9, max: 10},
  // 阿联酋
  '+971': {min: 9, max: 9},
  // 沙特阿拉伯
  '+966': {min: 9, max: 9},
  // 默认配置，适用于未明确定义的国家
  'default': {min: 5, max: 15}
};

onMounted(() => {
  // 初始化手机号和区号
  if (props.initialPhoneNumber) {
    phoneNumber.value = props.initialPhoneNumber;
    initialValues.value = true;
  }

  // 根据初始区号设置默认国家
  if (props.initialCountryCode) {
    const defaultCountry = findCountryByCode(props.initialCountryCode);
    selectedCountry.value = defaultCountry.uniqueId;
    initialValues.value = true;
  } else {
    // 默认选择美国
    const usCountry = finalCountries.find(country => country.label === 'US');
    if (usCountry) {
      selectedCountry.value = usCountry.uniqueId;
    } else {
      selectedCountry.value = finalCountries[0].uniqueId;
    }
  }

  // 如果有初始值，立即验证
  if (phoneNumber.value) {
    validatePhoneNumber(phoneNumber.value, countryCode.value);
  }
});

// 监听输入变化
watch([phoneNumber, countryCode], ([newPhoneNumber, newCountryCode]) => {
  validatePhoneNumber(newPhoneNumber, newCountryCode);
});

// 监听props变化，确保props更新时组件也更新
watch(() => props.initialPhoneNumber, (newValue) => {
  if (newValue) {
    phoneNumber.value = newValue;
    initialValues.value = true;
    // 如果有新的phone值，重新验证
    validatePhoneNumber(newValue, countryCode.value);
  } else {
    // 清空电话号码并重置验证状态
    phoneNumber.value = '';
    isValid.value = false;
    errorMessage.value = '';
    emitPhoneData(false);
  }
});

watch(() => props.initialCountryCode, (newValue) => {
  if (newValue) {
    const defaultCountry = findCountryByCode(newValue);
    selectedCountry.value = defaultCountry.uniqueId;
    initialValues.value = true;
  }
});

// 监听输入变化 - 使用防抖处理
const validatePhoneNumber = (number, country) => {
  if (!number || !country) {
    errorMessage.value = '';
    isValid.value = false;
    emitPhoneData(false);
    return;
  }

  try {
    // 获取当前国家代码的位数限制
    const countryLengths = phoneNumberLengths[country] || phoneNumberLengths['default'];
    const {min, max} = countryLengths;

    // 清除非数字字符再检查位数 (允许格式化字符但只计算数字)
    const cleanNumber = number.replace(/[^0-9]/g, '');
    const isLengthValid = cleanNumber.length >= min && cleanNumber.length <= max;

    if (isLengthValid) {
      errorMessage.value = '';
      isValid.value = true;
      const phoneData = {
        countryCode: country,
        phoneNumber: cleanNumber, // 只保留纯数字
        formattedPhoneNumber: number, // 保留用户输入的格式化版本
        fullNumber: `${country}${cleanNumber}`, // 完整号码也只用纯数字
        isValid: true,
        countryInfo: currentCountry.value
      };
      emitPhoneData(true, phoneData);
    } else {
      // 使用i18n国际化提示错误消息
      errorMessage.value = `Phone number should be ${min}-${max} digits`;
      isValid.value = false;
      emitPhoneData(false);
    }
  } catch (error) {
    errorMessage.value = `Invalid phone number format`;
    isValid.value = false;
    emitPhoneData(false);
  }
};

// 向父组件发送数据
const emitPhoneData = (isValid, data = null) => {
  // 避免重复发送相同的数据
  let shouldEmit = true;

  if (data) {
    // 如果有上一次发送的数据，检查是否有变化
    if (lastEmittedData.value) {
      // 只有当关键字段有变化时才发送
      shouldEmit =
          data.countryCode !== lastEmittedData.value.countryCode ||
          data.phoneNumber !== lastEmittedData.value.phoneNumber ||
          isValid !== lastEmittedData.value.isValid;
    }

    if (shouldEmit) {
      // 克隆数据，避免引用问题
      lastEmittedData.value = {
        countryCode: data.countryCode,
        phoneNumber: data.phoneNumber, // 已经是纯数字
        isValid: isValid
      };

      // 延迟发送，避免短时间内多次发送
      clearTimeout(emitTimeout.value);
      emitTimeout.value = setTimeout(() => {
        emit('update:phoneData', {isValid, data});
      }, 100);
    }
  } else if (!data && isValid === false) {
    // 失败状态的处理
    if (!lastEmittedData.value || lastEmittedData.value.isValid !== false) {
      // 清除掉phoneNumber中的非数字字符
      const cleanPhone = phoneNumber.value.replace(/[^0-9]/g, '');

      // 创建一个简单的失败状态对象
      const emptyData = {
        countryCode: countryCode.value,
        phoneNumber: cleanPhone, // 只保留纯数字
        formattedPhoneNumber: phoneNumber.value, // 保留格式化版本
        fullNumber: `${countryCode.value}${cleanPhone}`, // 完整号码也只用纯数字
        isValid: false
      };

      lastEmittedData.value = {
        countryCode: countryCode.value,
        phoneNumber: cleanPhone, // 只保留纯数字
        isValid: false
      };

      // 延迟发送失败消息
      clearTimeout(emitTimeout.value);
      emitTimeout.value = setTimeout(() => {
        emit('update:phoneData', {isValid: false, data: emptyData});
      }, 100);
    }
  }
};

// 辅助变量：上次发出的数据和定时器
const lastEmittedData = ref(null);
const emitTimeout = ref(null);

// 处理输入，过滤非法字符，只允许数字、括号、空格和连字符
const handleInput = (e) => {
  // 允许数字、括号、空格、连字符、加号
  const filteredValue = e.target.value.replace(/[^0-9()\- +]/g, '');
  // 只有当过滤后的值与当前值不同时才更新，避免光标跳转
  if (filteredValue !== e.target.value) {
    phoneNumber.value = filteredValue;
  }
};

// 验证按键输入，只允许数字、括号、空格和连字符
const validateKeyPress = (e) => {
  const charCode = (e.which) ? e.which : e.keyCode;
  // 允许数字、括号、空格、连字符、加号的ASCII码
  const allowedChars = [32, 40, 41, 43, 45]; // 空格=32, (=40, )=41, +=43, -=45

  // 如果不是数字(48-57)且不在允许的特殊字符列表中
  if ((charCode < 48 || charCode > 57) && !allowedChars.includes(charCode)) {
    e.preventDefault();
    return false;
  }
  return true;
};

// 处理国家选择变更
const handleCountryChange = (uniqueId) => {
  if (selectedCountry.value !== uniqueId) {
    selectedCountry.value = uniqueId;
    // 当国家发生变化时，立即验证电话号码
    validatePhoneNumber(phoneNumber.value, countryCode.value);
  }
};

// 搜索过滤函数
const filterOption = (input, option) => {
  if (!input || !option || !option.value) return true;

  const country = finalCountries.find(c => c.uniqueId === option.value);
  if (!country) return false;

  const searchInput = input.toLowerCase();

  return country.value.toLowerCase().includes(searchInput) ||
      country.label.toLowerCase().includes(searchInput) ||
      country.displayName.toLowerCase().includes(searchInput);
};
</script>

<style scoped>
.error {
  color: red;
}

.country-option {
  display: flex;
  align-items: center;
  white-space: nowrap;
  gap: 6px;
}

.country-flag-img {
  width: 20px;
  height: 15px;
  vertical-align: middle;
  display: inline-block;
  border-radius: 2px;
}

.country-iso {
  font-size: 12px;
  color: #333;
  min-width: 24px;
}

.country-code {
  color: #666;
  font-size: 13px;
}

/* 确保下拉选项中的内容对齐 */
:deep(.ant-select-item-option-content) {
  display: flex;
  align-items: center;
}

/* 确保选择框中的内容对齐 */
:deep(.ant-select-selection-item) {
  display: flex;
  align-items: center;
}
</style>

<!--
使用说明:

1. 引入组件:
   import PhoneNumberInput from '@/components/PhoneNumberInput.vue';

2. 在父组件中注册:
   components: {
     PhoneNumberInput
   }

3. 在模板中使用:
   <PhoneNumberInput
     :initialPhoneNumber="phoneNumber"
     :initialCountryCode="countryCode"
     @update:phoneData="handlePhoneData"
   />

4. 参数说明:
   - initialPhoneNumber: 初始电话号码，不包含国家代码 (String, 默认: '')
   - initialCountryCode: 初始国家代码，如 '+1' (String, 默认: '+1')

5. 事件:
   - update:phoneData: 当电话号码变更时触发，返回对象:
     {
       isValid: Boolean, // 电话号码是否有效
       data: {
         countryCode: String, // 国家代码 (如 '+1')
         phoneNumber: String, // 不带国家代码的电话号码
         fullNumber: String,  // 完整电话号码 (国家代码+电话号码)
         isValid: Boolean     // 电话号码是否有效
       }
     }

6. 使用示例:
   <template>
     <PhoneNumberInput
       :initialPhoneNumber="form.phoneNumber"
       :initialCountryCode="form.countryCode"
       @update:phoneData="handlePhoneData"
     />
   </template>

   <script setup>
   import PhoneNumberInput from '@/components/PhoneNumberInput.vue';

   const form = ref({
     phoneNumber: '',
     countryCode: '+1'
   });

   const handlePhoneData = (phoneData) => {
     if (phoneData.isValid) {
       // 处理有效的电话号码
       form.value.phone = phoneData.data.fullNumber;
     } else {
       // 处理无效的电话号码
       console.log('无效的电话号码');
     }
   };
   </script>
-->
